<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <title>Title</title>
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--
    <link rel="stylesheet" type="text/css" href="http://lib.sinaapp.com/js/bootstrap/2.0.3/css/bootstrap-responsive.css">
    <link rel="stylesheet" type="text/css" href="http://lib.sinaapp.com/js/bootstrap/2.0.3/css/bootstrap.css">
    <script type="text/javascript" src="http://lib.sinaapp.com/js/bootstrap/2.0.3/js/bootstrap.js"></script>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/webfont/1.0.9/webfont.js"></script>
  -->
    <link rel="stylesheet" type="text/css" href="../style/bootstrap.css">    

    <link rel="stylesheet" type="text/css" href="../style/bootstrap-responsive.css">
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="../style/g.css">
  </head>
  <body>

<div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
        <div class="navbar-inner">
          <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">DOUQIN</a>
            <div class="nav-collapse collapse">
              <p class="navbar-text pull-right">
                <a href="#" class="navbar-link">登录</a><a href="#" class="navbar-link">注册</a>
              </p>
              <ul class="nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#about">22222</a></li>
                <li><a href="#contact">3333</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </div>
</div>


<div class="container">
    <header>
      <div class="inner">
        <h1>DouQin</h1>
      </div>  
    </header>
</div>

    <article id="article">   
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details »</a></p>
        </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details »</a></p>
        </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details »</a></p>
        </div> 
         <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details »</a></p>
        </div>          
      </article>

<div class="container">
      <div class="pagination pagination-centered">
        <ul>
          <li class="page_prev disabled"><a href="index.html?page=1">←</a></li> 
          <li class="active disabled"><a href="index.html?page=1">1</a></li>
          <li><a href="index.html?page=2">2</a></li>
          <li><a href="index.html?page=3">3</a></li>
          <li><a href="index.html?page=4">4</a></li>
          <li><a href="index.html?page=5">5</a></li>
          <li><a href="index.html?page=6">6</a></li>
          <li><a href="index.html?page=7">7</a></li>
          <li><a href="index.html?page=8">8</a></li>
          <li><a href="index.html?page=9">9</a></li>
          <li><a href="index.html?page=10">10</a></li>
          <li><a href="index.html?page=11">11</a></li>
          <li><a href="index.html?page=12">12</a></li>
          <li><a href="index.html?page=13">13</a></li>
          <li><a href="index.html?page=14">14</a></li>
          <li><a href="index.html?page=15">15</a></li>
          <li class="page_next"><a href="index.html?page=2">→</a></li>
        </ul>
      </div>
</div>


</body>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript" src="../script/bootstrap.js"></script>
<script type="text/javascript" src="../script/jquery.infinitescroll.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function($) { 
    $('#article').infinitescroll({
        navSelector  : ".pagination",
        nextSelector : ".pagination .page_next a",
        itemSelector : "#article div.span4",        
        localMode:true,    
      });
  });
</script>
</html>


<!--   <article id="article">   
          <foreach name="HostNodes" item="host">
                  <div class="span4">
                    <h2>{$host.title}</h2>
                    <p>{:strip_tags($host["content"],"a,img")} </p>
                    <p><a class="btn" href="#">View details »</a></p>
                  </div>
          </foreach>
      </article> -->